import React, { Component} from 'react'
import PropTypes from 'prop-types'
import store from '../../redux/store'
import { Card, WhiteSpace} from 'antd-mobile'
import { withRouter}from 'react-router-dom'
import QueueAnim  from 'rc-queue-anim'




//获取Card的子组件  里面要显示的 东西使用 div 即可
const Header = Card.Header
const Body = Card.Body

/*
    这里是 专门显示用户的列表
    此时这里所要的数据 由相应的 类型组件传过来
    显示 大神的列表
        header username post info
    显示 老板的列表
        header username post info salary company
 */
class UserList extends Component{

    static propTypes = {
        userList: PropTypes.array.isRequired,
    }

    //这里刷新的时候 使系统的滚动条滚动为0 这样每次刷新都能保证显示第一个人
    componentDidMount(){
        window.scrollTo(0, 0)
        this.props.userList.accentInfo(this.props.userList.meId)
    }

    render(){
        const { userList} = this.props
        const { username, post, info, company, salary, meId, accentInfo} = userList
        return(
        <div className='userList'>
            <QueueAnim type='scale'>
                {
                    userList.map((user, index) => (
                        <div key={user.username}>
                            <WhiteSpace />
                            <Card onClick={() => this.props.history.push(`/chat/${user._id}`)}>
                                <Header
                                    thumb={ require(`../../assets/images/${user.header}.png`)}
                                    extra={ user.username}
                                >

                                </Header>
                                <Body>
                                <div>职位：{ user.post}</div>
                                <div>简介：{ user.info}</div>
                                {
                                    user.company?<div>公司：{ user.company}</div>:null
                                }
                                {
                                    user.salary?<div>薪资：{ user.salary}</div>:null
                                }

                                </Body>
                            </Card>
                        </div>
                    ))
                }
            </QueueAnim>
        </div>
        )
    }
}

export default withRouter(UserList)